<!DOCTYPE html>
{% load static %}

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/dist/css/bootstrap.min.css' %}">
	<style>
		.account {
			width: 400px;
			border: 1px solid #dddddd;
			border-radius: 5px;
			box-shadow: 5px 5px 20px #aaaaaa;

			margin-left: auto;
			margin-right: auto;
			margin-top: 100px;
			padding: 20px 40px;
		}

		.account h2 {
			margin-top: 10px;
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="account">
		<h2>用户登陆</h2>
		<form method="post" novalidate>
			{% csrf_token %}

			<div class="form-group">
				<label>用户名</label>
				{{ form.user_name}}
				<span style="color: red;">{{ form.user_name.errors.0 }}</span>
			</div>
			<div class="form-group">
				<label>密码</label>
				{{ form.password }}
				<span style="color: red;">{{ form.password.errors.0 }}</span>
			</div>
			<div class="form-group">
				<label for="id_code">图片验证码</label>
				<div class="row">
					<div class="col-xs-7">
						{{ form.code }}
						<span style="color:red;">{{ form.code.errors.0 }}</span>
					</div>
					<div class="col-xs-5">
						<img src="/image/code/" id="image_code" style="width: 125px">
					</div>
				</div>

			</div>
			<input type="submit" value="登陆" class="btn btn-primary" style="width: 125px">
		</form>
	</div>

</body>
</html>